<template>
  <div class="home">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="name.zh-CN"
        label="名称"
        width="180"
      />
      <el-table-column
        prop="address.formatted"
        label="地址"
        width="180"
      />
      <el-table-column
        label="标签"
      >
        <template slot-scope="scope">
          <el-tag
            v-for="item in scope.row.tags"
            :key="item"
          >
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="openDialog(scope.row)">
            操作
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      @current-change="changePage"
    />

    <el-dialog
      v-if="dialogVisible"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <div class="lang-container">
        <el-select
          v-model="lang"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="dialogData.name[lang]" />
      </div>

      <div class="tags-container">
        <el-select
          v-model="tag"
          placeholder="请选择"
          @change="addTag"
        >
          <el-option
            v-for="item in tags"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>

        <el-tag
          v-for="item in dialogData.tags"
          :key="item"
          closable
          @close="removeTag(item)"
        >
          {{ item }}
        </el-tag>
      </div>

      <div
        v-for="(item,index) in time"
        :key="index"
        class="tags-container"
      >
        <div>
          {{ weekDay[index] }}
        </div>
        <el-time-picker
          v-model="time[index]"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @change="updateTime"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';
import { getRestaurants, getTags } from '@/api/restaurant';

export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      restaurants: [],
      tags: [],
      tag: '',
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      dialogData: {},
      options: [
        {
          label: '中文',
          value: 'zh-CN',
        },
        {
          label: '英文',
          value: 'en-US',
        },
      ],
      lang: 'zh-CN',
      time: [],
      weekDay: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
    };
  },
  computed: {
    tableData() {
      return this.restaurants.slice((this.currentPage - 1) * 10, this.currentPage * 10);
    },
  },
  created() {
    this.loadRestaurants();
    this.loadTags();
  },
  methods: {
    async loadRestaurants() {
      try {
        const result = await getRestaurants();
        this.restaurants = result.list;
        this.total = this.restaurants.length;
      } catch (error) {
        console.log(error);
      }
    },
    async loadTags() {
      const result = await getTags();
      this.tags = result.list;
    },
    changePage(v) {
      this.currentPage = v;
    },
    openDialog(v) {
      this.dialogVisible = true;
      this.dialogData = _.cloneDeep(v);
      this.hoursToDate();
    },
    addTag(v) {
      if (!_.includes(this.dialogData.tags, v)) {
        this.dialogData.tags.push(v);
      }
    },
    removeTag(v) {
      this.dialogData.tags.splice(this.dialogData.tags.indexOf(v), 1);
    },
    hoursToDate() {
      this.weekDay.forEach((item, index) => {
        const data = this.dialogData.hours[index];
        const start = moment().startOf('day').add(_.get(data, 'start', 0), 'minutes').toDate();
        const end = moment().startOf('day').add(_.get(data, 'end', 0), 'minutes').toDate();
        const array = [start, end];
        this.time.push(array);
      });
    },
    updateTime() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.el-tag {
  margin-left:2px;
}

.lang-container {
  display: flex;
}

.tags-container {
  display: flex;
}
</style>
